React์ ์คํ์ ๊ธฐ๋ฅ์ธ experimental_Scope๋ฅผ ํตํ ๋ฉ๋ชจ๋ฆฌ ๊ฒฉ๋ฆฌ๋ฅผ ํ๊ตฌํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค์ฝํ ๊ธฐ๋ฐ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ์ ๋ํ ํ๊ธฐ์ ์ธ ์ ๊ทผ๋ฒ์ ์ด์ , ์ฌ์ฉ๋ฒ, ์ ์ฌ์ ์ํฅ์ ์์๋ณด์ธ์.
React experimental_Scope ๋ฉ๋ชจ๋ฆฌ ๊ฒฉ๋ฆฌ: ์ค์ฝํ ๊ธฐ๋ฐ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ์ ๋ํ ์ฌ์ธต ๋ถ์
React๋ ์ฑ๋ฅ, ๊ฐ๋ฐ์ ๊ฒฝํ, ์ ๋ฐ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์
์ํคํ
์ฒ๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํด ์ ๊ธฐ์ ์ผ๋ก ์๋ก์ด ๊ธฐ๋ฅ๊ณผ API๋ฅผ ๋์
ํ๋ฉฐ ๋์์์ด ์งํํ๊ณ ์์ต๋๋ค. ์ด๋ฌํ ์คํ์ ๊ธฐ๋ฅ ์ค ํ๋๊ฐ ๋ฐ๋ก experimental_Scope์ด๋ฉฐ, ์ด๋ ์ค์ฝํ์ ๊ธฐ๋ฐํ ์๋ก์ด ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ ์ ๊ทผ๋ฒ์ ์ ์ํฉ๋๋ค. ์ด ๋ธ๋ก๊ทธ ํฌ์คํธ์์๋ experimental_Scope์ ์ธ๋ถ ์ฌํญ์ ํํค์น๊ณ , ๊ทธ ์ด์ , ์ฌ์ฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ React ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฏธ์น ์ ์ฌ์ ์ํฅ์ ๋ํด ํ๊ตฌํ ๊ฒ์
๋๋ค.
experimental_Scope๋ ๋ฌด์์ธ๊ฐ?
์ด๋ฆ์์ ์ ์ ์๋ฏ์ด experimental_Scope๋ ์ค์ฝํ ๊ธฐ๋ฐ ๋ฉ๋ชจ๋ฆฌ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ์ค๊ณ๋ React์ ์คํ์ API์
๋๋ค. ๋ณธ์ง์ ์ผ๋ก, ์ด๋ React ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ํน์ ๋ถ๋ถ ์ฃผ์์ ๊ฒฝ๊ณ๋ฅผ ์ ์ํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด ๊ฒฝ๊ณ ๋ด์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ ๋, ํด๋น ์ปดํฌ๋ํธ ๋ฐ ๊ทธ ์์๋ค๊ณผ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๋ ํ์ค ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋น์ง ์ปฌ๋ ์
๋ฉ์ปค๋์ฆ๋ณด๋ค ๋ ์ ๊ทน์ ์ผ๋ก ํด์ ๋ฉ๋๋ค. ์ด๋ ๋ณต์กํ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ๊ฐ์ง๊ฑฐ๋ ๋น๋ฒํ ๋ง์ดํธ ๋ฐ ๋ง์ดํธ ํด์ ๊ฐ ๋ฐ์ํ๋ ์ ํ๋ฆฌ์ผ์ด์
์์ ์๋นํ ์ฑ๋ฅ ํฅ์์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
์ ํต์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ฉ๋ชจ๋ฆฌ ํ์๋ฅผ ์ํด ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ์์กดํฉ๋๋ค. ๊ฐ๋น์ง ์ปฌ๋ ํฐ๋ ๋ ์ด์ ๋๋ฌํ ์ ์๋ ๊ฐ์ฒด๋ฅผ ์๋ณํ๊ณ ๊ทธ๋ค์ด ์ฐจ์งํ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํด์ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ๋น์ง ์ปฌ๋ ํฐ์ ์คํ ์์ ์ ์ข ์ข ์์ธกํ ์ ์์ผ๋ฉฐ, ๋ง์ดํธ ํด์ ๋ ์ปดํฌ๋ํธ์ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฆ์ ํด์ ํ์ง ์์ ์ ์์ต๋๋ค. ํนํ ํด๋น ์ปดํฌ๋ํธ๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ์ํด ์ฌ์ ํ ์ฐธ์กฐ๋๋ ๊ฒฝ์ฐ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
experimental_Scope๋ ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ํ ์น์
์ ๋ง์ดํธ ํด์ ์ ์ฆ๊ฐ์ ์ธ ๊ฐ๋น์ง ์ปฌ๋ ์
๋์์ผ๋ก ๋ช
์์ ์ผ๋ก ํ์ํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ฌ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ์๋๋ฆฌ์ค์์ ํนํ ์ ์ฉํ ์ ์์ต๋๋ค:
- ํฐ ๋ฐ์ดํฐ์ ์ด ์ปดํฌ๋ํธ ๋ด์์ ๋ ๋๋ง๋ ํ ํด๋น ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋๋ ๊ฒฝ์ฐ.
- ์ปดํฌ๋ํธ๊ฐ ์๋นํ ์์ ์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ณ ๊ด๋ฆฌํ๋ ๊ฒฝ์ฐ.
- ์ปดํฌ๋ํธ์ ๋น๋ฒํ ๋ง์ดํธ ๋ฐ ๋ง์ดํธ ํด์ ๋ก ์ธํด ๋ฉ๋ชจ๋ฆฌ ๋จํธํ๊ฐ ๋ฐ์ํ๋ ๊ฒฝ์ฐ.
์ด๋ป๊ฒ ์๋ํ๋๊ฐ?
experimental_Scope API๋ ๋ฉ๋ชจ๋ฆฌ ๊ฒฉ๋ฆฌ์ ๊ฒฝ๊ณ ์ญํ ์ ํ๋ ์๋ก์ด React ์ปดํฌ๋ํธ์ธ <experimental_Scope>๋ฅผ ๋์
ํฉ๋๋ค. ์ด ์ค์ฝํ ๋ด์์ ๋ ๋๋ง๋ ์ปดํฌ๋ํธ๋ค์ ์ถ์ ๋๋ฉฐ, <experimental_Scope> ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ ๋, React๋ ๊ฐ๋น์ง ์ปฌ๋ ํฐ์๊ฒ ํด๋น ์ปดํฌ๋ํธ๋ค๊ณผ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฐ์ ์ ์ผ๋ก ํ์ํ๋๋ก ์ ํธ๋ฅผ ๋ณด๋
๋๋ค.
๋ค์์ experimental_Scope์ ์ฌ์ฉ๋ฒ์ ๋ณด์ฌ์ฃผ๋ ๊ฐ๋จํ ์์ ์
๋๋ค:
import React, { useState, experimental_Scope } from 'react';
function MyComponent() {
const [showScope, setShowScope] = useState(true);
return (
{showScope && (
{/* ํจ๊ป ๊ฐ๋น์ง ์ปฌ๋ ์
๋์ด์ผ ํ๋ ์ปดํฌ๋ํธ๋ค */}
)}
);
}
function ExpensiveComponent() {
// ์ด ์ปดํฌ๋ํธ๋ ๋ง์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ ๋นํ๊ฑฐ๋ ์ง์ฝ์ ์ธ ๊ณ์ฐ์ ์ํํ ์ ์์ต๋๋ค
const largeArray = new Array(1000000).fill(0);
return (
{/* largeArray๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌด์ธ๊ฐ๋ฅผ ๋ ๋๋งํฉ๋๋ค */}
{largeArray.length}
);
}
export default MyComponent;
์ด ์์ ์์ ExpensiveComponent๋ ํฐ ๋ฐฐ์ด์ ํ ๋นํฉ๋๋ค. showScope๊ฐ false๋ก ํ ๊ธ๋๋ฉด <experimental_Scope> ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋๊ณ , React๋ ๊ฐ๋น์ง ์ปฌ๋ ํฐ๊ฐ ExpensiveComponent์ ์ํด ์ฌ์ฉ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฐ์ ์ ์ผ๋ก ํ์ํ๋๋ก ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
experimental_Scope ์ฌ์ฉ์ ์ด์
experimental_Scope ์ฌ์ฉ์ ์ฃผ๋ ์ด์ ์ ํฅ์๋ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ์ด๋ฉฐ, ์ด๋ React ์ ํ๋ฆฌ์ผ์ด์
์ ์ฌ๋ฌ ๊ฐ์ง ์ฅ์ ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค:
- ๋ฉ๋ชจ๋ฆฌ ์๋น ๊ฐ์: ๋ง์ดํธ ํด์ ๋ ์ปดํฌ๋ํธ์ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๋ช
์์ ์ผ๋ก ํด์ ํจ์ผ๋ก์จ,
experimental_Scope๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ์ค์ด๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. - ์ฑ๋ฅ ํฅ์: ๋ฉ๋ชจ๋ฆฌ ์๋น ๊ฐ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ํฅ์์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๊ฐ๋น์ง ์ปฌ๋ ํฐ์ ์์ ๋์ด ์ค์ด๋ค๊ณ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๋ ํจ์จ์ ์ผ๋ก ํ ๋นํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ๋์ ์ํ:
experimental_Scope๋ ๋ง์ดํธ ํด์ ๋ ์ปดํฌ๋ํธ์ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๊ฐ ์ ์ํ๊ฒ ํ์๋๋๋ก ๋ณด์ฅํ์ฌ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. - ์๋ต์ฑ ํฅ์: ๋ ๋น ๋ฅธ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ฃผ๊ธฐ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฉ๋ชจ๋ฆฌ ํ์ ์ค์ ๋ฉ์ถ๋ ์๊ฐ์ด ์ค์ด๋ค์ด ๋ ๋ฐ์์ด ๋น ๋ฅธ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
์ฌ์ฉ ์ฌ๋ก ๋ฐ ์์
experimental_Scope๋ ๋ค์ํ ์๋๋ฆฌ์ค์์ ํนํ ์ ์ฉํ ์ ์์ต๋๋ค:
1. ๋์ ์ฝํ ์ธ ๋ก๋ฉ
๊ธฐ์ฌ, ์ด๋ฏธ์ง, ๋น๋์ค์ ๊ฐ์ ๋๋์ ์ฝํ
์ธ ๋ฅผ ๋์ ์ผ๋ก ๋ก๋ํ๊ณ ํ์ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ์๊ฐํด ๋ด
์๋ค. ์ฌ์ฉ์๊ฐ ํน์ ์ฝํ
์ธ ์์ ๋ค๋ฅธ ๊ณณ์ผ๋ก ์ด๋ํ๋ฉด ๊ด๋ จ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ฉ๋๋ค. experimental_Scope๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฌํ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉํ ๋ฉ๋ชจ๋ฆฌ๊ฐ ์ ์ํ๊ฒ ํ์๋์ด ๋ฉ๋ชจ๋ฆฌ ํฝ์ฐฝ์ ๋ฐฉ์งํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์์: ์ด๋ฏธ์ง์ ๋น๋์ค๊ฐ ํฌํจ๋ ๊ธฐ์ฌ๋ฅผ ํ์ํ๋ ๋ด์ค ์น์ฌ์ดํธ. ์ฌ์ฉ์๊ฐ ์ ๊ธฐ์ฌ๋ฅผ ํด๋ฆญํ๋ฉด ์ด์ ๊ธฐ์ฌ์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ฉ๋๋ค. ๊ธฐ์ฌ ์ฝํ
์ธ ๋ฅผ <experimental_Scope>๋ก ๊ฐ์ธ๋ฉด ์ด์ ๊ธฐ์ฌ์ ์ด๋ฏธ์ง์ ๋น๋์ค๊ฐ ์ฌ์ฉํ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํด์ ํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
2. ๋ณต์กํ ํผ ์ปดํฌ๋ํธ
๋ณต์กํ ํผ์ ์ข
์ข
์ฌ๋ฌ ์ค์ฒฉ๋ ์ปดํฌ๋ํธ๋ฅผ ํฌํจํ๋ฉฐ ์๋นํ ์์ ์ํ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ํผ์ด๋ ํผ์ ํ ์น์
์์ ๋ฒ์ด๋๋ฉด ๊ด๋ จ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ฉ๋๋ค. experimental_Scope๋ ์ด๋ฌํ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉํ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ์ํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ผ๋ฉฐ, ํนํ ์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ฑฐ๋ ํฐ ๋ฐ์ดํฐ์
์ ๊ด๋ฆฌํ๋ ๊ฒฝ์ฐ์ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
์์: ๋ค๋จ๊ณ ๊ฒฐ์ ํ๋ก์ธ์ค๊ฐ ์๋ ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ. ๊ฒฐ์ ํ๋ก์ธ์ค์ ๊ฐ ๋จ๊ณ๋ ๋ณ๋์ ์ปดํฌ๋ํธ๋ก ๋ ๋๋ง๋ฉ๋๋ค. ๊ฐ ๋จ๊ณ๋ฅผ <experimental_Scope>๋ก ๊ฐ์ธ๋ฉด ์ฌ์ฉ์๊ฐ ๋ค์ ๋จ๊ณ๋ก ์ด๋ํ ๋ ์ด์ ๋จ๊ณ์์ ์ฌ์ฉํ ๋ฉ๋ชจ๋ฆฌ๊ฐ ํ์๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
3. ์ธํฐ๋ํฐ๋ธ ๋ฐ์ดํฐ ์๊ฐํ
๋ฐ์ดํฐ ์๊ฐํ๋ ์ข
์ข
ํฐ ๋ฐ์ดํฐ์
์ ๋ ๋๋งํ๊ณ ๋ณต์กํ ๊ทธ๋ํฝ ์์๋ฅผ ์์ฑํ๋ ์์
์ ํฌํจํฉ๋๋ค. ์๊ฐํ๊ฐ ๋ ์ด์ ํ์ํ์ง ์์ผ๋ฉด ๊ด๋ จ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ฉ๋๋ค. experimental_Scope๋ ์ด๋ฌํ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉํ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ์ํ์ฌ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
์์: ์ธํฐ๋ํฐ๋ธ ์ฐจํธ์ ๊ทธ๋ํ๋ฅผ ํ์ํ๋ ๊ธ์ต ๋์๋ณด๋. ์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ๋์๋ณด๋ ๋ทฐ๋ก ์ ํํ๋ฉด ์ด์ ์๊ฐํ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ฉ๋๋ค. ์๊ฐํ๋ฅผ <experimental_Scope>๋ก ๊ฐ์ธ๋ฉด ์ฐจํธ์ ๊ทธ๋ํ๊ฐ ์ฌ์ฉํ ๋ฉ๋ชจ๋ฆฌ๊ฐ ํด์ ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
4. React๋ฅผ ์ฌ์ฉํ ๊ฒ์ ๊ฐ๋ฐ
React๋ฅผ ์ฌ์ฉํ ๊ฒ์ ๊ฐ๋ฐ์์๋ ๋ ๋ฒจ๊ณผ ๊ฒ์ ์ํ๊ฐ ์์ฃผ ๋ณ๊ฒฝ๋์ด ๋ค์ํ ๊ฒ์ ์์๋ฅผ ๋ํ๋ด๋ ์ปดํฌ๋ํธ์ ๋ง์ดํธ ๋ฐ ๋ง์ดํธ ํด์ ๊ฐ ๋น๋ฒํ๊ฒ ๋ฐ์ํฉ๋๋ค. experimental_Scope๋ ์ด๋ฌํ ๋์ ์ปดํฌ๋ํธ์ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๊ด๋ฆฌํ์ฌ ๋ฉ๋ชจ๋ฆฌ ์ถ์ ์ ๋ฐฉ์งํ๊ณ ์ํํ ๊ฒ์ ํ๋ ์ด๋ฅผ ๋ณด์ฅํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํ ์ ์์ต๋๋ค.
์์: ๊ฐ ๋ ๋ฒจ์ด React ์ปดํฌ๋ํธ ์งํฉ์ผ๋ก ํํ๋๋ ๊ฐ๋จํ ํ๋ซํผ ๊ฒ์. ํ๋ ์ด์ด๊ฐ ํ ๋ ๋ฒจ์ ์๋ฃํ๊ณ ๋ค์ ๋ ๋ฒจ๋ก ์ด๋ํ๋ฉด ์ด์ ๋ ๋ฒจ์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ฉ๋๋ค. ๋ ๋ฒจ ์ปดํฌ๋ํธ๋ฅผ <experimental_Scope>๋ก ๊ฐ์ธ๋ฉด ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํจ์จ์ ์ผ๋ก ํ์ํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๊ณ ๋ ค ์ฌํญ ๋ฐ ์ ํ ์ฌํญ
experimental_Scope๋ ์๋นํ ์ ์ฌ์ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ๊ทธ ํ๊ณ์ ๊ณ ๋ ค ์ฌํญ์ ์ธ์งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์คํ์ API: ์ด๋ฆ์์ ์ ์ ์๋ฏ์ด
experimental_Scope๋ ์คํ์ API์ด๋ฉฐ ํฅํ React ๋ฆด๋ฆฌ์ค์์ ๋ณ๊ฒฝ๋๊ฑฐ๋ ์ ๊ฑฐ๋ ์ ์์ต๋๋ค. React ๊ฐ๋ฐ ๋ก๋๋งต์ ์ฃผ์ํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์กฐ์ ํ ์ค๋น๋ฅผ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. - ์ค๋ฒํค๋:
experimental_Scope๊ฐ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ฅผ ๊ฐ์ ํ ์ ์์ง๋ง, ์ฝ๊ฐ์ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ๊ธฐ๋ ํฉ๋๋ค. React๋ ์ค์ฝํ ๋ด์ ์ปดํฌ๋ํธ๋ฅผ ์ถ์ ํ๊ณ ๋ง์ดํธ ํด์ ์ ๊ฐ๋น์ง ์ปฌ๋ ํฐ๋ฅผ ํธ๋ฆฌ๊ฑฐํด์ผ ํฉ๋๋ค. ๊ฒฝ์ฐ์ ๋ฐ๋ผ, ํนํ ์๊ฑฐ๋ ๊ฐ๋จํ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ ์ด ์ค๋ฒํค๋๊ฐ ์ด์ ๋ณด๋ค ํด ์ ์์ต๋๋ค. - ๊ฐ๋น์ง ์ปฌ๋ ํฐ ๋์:
experimental_Scope๋ ๋จ์ง ๊ฐ๋น์ง ์ปฌ๋ ํฐ์๊ฒ ์ค์ฝํ ๋ด ์ปดํฌ๋ํธ์ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฐ์ ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ผ๊ณ ์ ํธ๋ฅผ ๋ณด๋ผ ๋ฟ์ ๋๋ค. ๋ฉ๋ชจ๋ฆฌ๊ฐ ์ฆ์ ํ์๋๋ค๋ ๊ฒ์ ๋ณด์ฅํ์ง๋ ์์ต๋๋ค. ๊ฐ๋น์ง ์ปฌ๋ ํฐ์ ์ค์ ๋์์ ๋ธ๋ผ์ฐ์ ์ ๊ตฌํ ๋ฐ ์ ๋ฐ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ์๋ฐ๊ณผ ๊ฐ์ ๋ค์ํ ์์ธ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. - ๋๋ฒ๊น
: React ์ ํ๋ฆฌ์ผ์ด์
์์ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ๋๋ฒ๊น
ํ๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ผ๋ฉฐ,
experimental_Scope๋ ๋ณต์ก์ฑ์ ํ์ธต ๋ํ ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ๋ชจ๋ํฐ๋งํ๊ณ ์ ์ฌ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ์๋ณํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. - ์ ์ฌ์ ๋ถ์์ฉ: ๊ณต๊ฒฉ์ ์ธ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋๋ฌผ๊ฒ ์๋ํ์ง ์์ ๊ณต์ ์ํ๋ ๊ฐ์ฒด ์๋ช ์ ๋ํ ์๋ชป๋ ๊ฐ์ ๊ณผ ๊ด๋ จ๋ ์ ์ฌ์ ์ธ ๋ฒ๊ทธ๋ฅผ ๋ ธ์ถ์ํฌ ์ ์์ต๋๋ค. ์ฒ ์ ํ ํ ์คํธ๊ฐ ํ์์ ์ ๋๋ค.
experimental_Scope ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
experimental_Scope๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๊ณ ๊ทธ ์ด์ ์ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ์ ํ๋ฆฌ์ผ์ด์
ํ๋กํ์ผ๋ง:
experimental_Scope๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ๋กํ์ผ๋งํ์ฌ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๊ฐ ๋ณ๋ชฉ ํ์์ ์ผ์ผํค๋ ๋ถ๋ถ์ ์๋ณํ์ญ์์ค. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ์ถ์ ํ๊ณ ์๋นํ ์์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ ๋นํ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฐพ์ผ์ญ์์ค. - ํฐ ์ปดํฌ๋ํธ ๋์ ์ง์ : ์๋นํ ์์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ ๋นํ๋ ํฌ๊ฑฐ๋ ๋ณต์กํ ์ปดํฌ๋ํธ ์ฃผ์์
experimental_Scope๋ฅผ ์ฌ์ฉํ๋ ๋ฐ ์ง์คํ์ญ์์ค. ์๊ฑฐ๋ ๊ฐ๋จํ ์ปดํฌ๋ํธ์ ์ฌ์ฉํ๋ ๊ฒ์ ํผํ์ญ์์ค. ์ค๋ฒํค๋๊ฐ ์ด์ ๋ณด๋ค ํด ์ ์์ต๋๋ค. - ์ฑ๋ฅ ์ธก์ :
experimental_Scope๋ฅผ ๊ตฌํํ ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ธก์ ํ์ฌ ์ค์ ๋ก ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๊ฐ ๊ฐ์ ๋์๋์ง ํ์ธํ์ญ์์ค. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋, ๊ฐ๋น์ง ์ปฌ๋ ์ ์ฃผ๊ธฐ ๋ฐ ์ ๋ฐ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์ถ์ ํ์ญ์์ค. - ์ฒ ์ ํ ํ
์คํธ:
experimental_Scope๋ฅผ ๊ตฌํํ ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒ ์ ํ ํ ์คํธํ์ฌ ์๋ก์ด ๋ฒ๊ทธ๋ ํ๊ท๊ฐ ๋ฐ์ํ์ง ์๋์ง ํ์ธํ์ญ์์ค. ํนํ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ จ ๋ฌธ์ ์ ์ ์ฌ์ ๋ถ์์ฉ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ญ์์ค. - React ์
๋ฐ์ดํธ ๋ชจ๋ํฐ๋ง: React ์
๋ฐ์ดํธ์
experimental_ScopeAPI ๋ณ๊ฒฝ ์ฌํญ์ ๋ํ ์ ๋ณด๋ฅผ ๊ณ์ ํ์ธํ์ญ์์ค. API๊ฐ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ๊ทธ์ ๋ง๊ฒ ์กฐ์ ํ ์ค๋น๋ฅผ ํ์ญ์์ค.
experimental_Scope์ ๋์
experimental_Scope๊ฐ ์ ๋งํ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ ์ ๊ทผ๋ฒ์ ์ ๊ณตํ์ง๋ง, ์ฌ์ฉ ๊ฐ๋ฅํ ์ ์ผํ ์ต์
์ ์๋๋๋ค. ๊ณ ๋ คํด ๋ณผ ์ ์๋ ๋ช ๊ฐ์ง ๋์ ๊ธฐ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ: ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๋ ์ด์ ํ์ํ์ง ์์ ๋ฆฌ์์ค๋ฅผ ์๋์ผ๋ก ํด์ ํ์ฌ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ๋ณ์๋ฅผ
null๋ก ์ค์ ํ๊ฑฐ๋, ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํ๊ฑฐ๋, ์ฐ๊ฒฐ์ ๋ซ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์๋ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ ๋ณต์กํ๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ฐ๋ฏ๋ก ๊ฐ๋ฅํ๋ฉด ๊ฐ๋น์ง ์ปฌ๋ ํฐ์ ์์กดํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค. - ๋ฉ๋ชจ์ด์ ์ด์
(Memoization): ๋ฉ๋ชจ์ด์ ์ด์
์ ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ ์บ์ํ๊ณ ๋์ผํ ์
๋ ฅ์ด ๋ค์ ์ ๊ณต๋ ๋ ์ฌ์ฌ์ฉํจ์ผ๋ก์จ ๋ฉ๋ชจ๋ฆฌ ์๋น๋ฅผ ์ค์ด๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. React๋
React.memo๋ฐuseMemo์ ๊ฐ์ ์ฌ๋ฌ ๋ด์ฅ ๋ฉ๋ชจ์ด์ ์ด์ ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค. - ๊ฐ์ํ(Virtualization): ๊ฐ์ํ๋ ํฐ ๋ฐ์ดํฐ ๋ชฉ๋ก์ ๋ ๋๋งํ ๋ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ ๋ฉ๋ชจ๋ฆฌ ์๋น๋ฅผ ์ค์ด๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ๊ฐ์ํ ๊ธฐ์ ์ ๋ชฉ๋ก์์ ๋ณด์ด๋ ํญ๋ชฉ๋ง ๋ ๋๋งํ๊ณ ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ ๋ DOM ๋ ธ๋๋ฅผ ์ฌํ์ฉํฉ๋๋ค.
- ์ฝ๋ ์คํ๋ฆฌํ
(Code Splitting): ์ฝ๋ ์คํ๋ฆฌํ
์ ์ ํ๋ฆฌ์ผ์ด์
์ ํ์์ ๋ฐ๋ผ ๋ก๋๋๋ ๋ ์์ ์ฒญํฌ๋ก ๋ถํ ํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ๊ณผ ๋ฉ๋ชจ๋ฆฌ ์๋น๋ฅผ ์ค์ด๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. React๋
React.lazy๋ฐSuspense์ ๊ฐ์ ์ฌ๋ฌ ๋ด์ฅ ์ฝ๋ ์คํ๋ฆฌํ ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค.
๊ฒฐ๋ก
experimental_Scope๋ React์ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ ๊ธฐ๋ฅ์์ ์ค์ํ ์ง์ ์ ๋ํ๋
๋๋ค. ์ค์ฝํ ๊ธฐ๋ฐ ๋ฉ๋ชจ๋ฆฌ ๊ฒฉ๋ฆฌ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ค์ด React ์ ํ๋ฆฌ์ผ์ด์
์์ ๋ฉ๋ชจ๋ฆฌ ์๋น๋ฅผ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋ฉฐ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ์ํํ๋ ๋ฐ ๋์์ ์ค ์ ์์ต๋๋ค. ์์ง ์คํ์ ์ธ API์ด์ง๋ง, React ๊ฐ๋ฐ์ ๋ฏธ๋์ ํฐ ๊ฐ๋ฅ์ฑ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๊ทธ๋ฌ๋ experimental_Scope์ ์ ์คํ๊ฒ ์ ๊ทผํ๊ณ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌํํ๊ธฐ ์ ์ ๊ทธ ์ด์ ๊ณผ ํ๊ณ๋ฅผ ์ ์คํ๊ฒ ํ๊ฐํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. experimental_Scope๋ฅผ ํจ๊ณผ์ ์ด๊ณ ์์ ํ๊ฒ ์ฌ์ฉํ๋ ค๋ฉด ์ ํ๋ฆฌ์ผ์ด์
์ ํ๋กํ์ผ๋งํ๊ณ , ์ฑ๋ฅ์ ์ธก์ ํ๋ฉฐ, ์ฒ ์ ํ ํ
์คํธํ๊ณ , React ์
๋ฐ์ดํธ์ ๋ํ ์ ๋ณด๋ฅผ ๊ณ์ ํ์ธํ์ญ์์ค.
React๊ฐ ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ ๊ฐ๋ฐ์์๊ฒ ์ ์ ๋ ์ค์ํ ๊ณ ๋ ค ์ฌํญ์ด ๋ ๊ฒ์ ๋๋ค. ์ต์ ๊ธฐ์ ๊ณผ ๊ธฐ๋ฒ์ ๋ํ ์ ๋ณด๋ฅผ ์ง์์ ์ผ๋ก ํ์ธํจ์ผ๋ก์จ React ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ํจ์จ์ ์ด๋ฉฐ ํ์ฅ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
๋ฉด์ฑ
์กฐํญ: ์ด ๋ธ๋ก๊ทธ ํฌ์คํธ๋ experimental_Scope API์ ํ์ฌ ์ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํฉ๋๋ค. ์คํ์ ๊ธฐ๋ฅ์ด๋ฏ๋ก API ๋ฐ ๊ทธ ๋์์ ํฅํ React ๋ฆด๋ฆฌ์ค์์ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค. ํญ์ ์ต์ ์ ๋ณด๋ ๊ณต์ React ๋ฌธ์๋ฅผ ์ฐธ์กฐํ์ญ์์ค.
์ด ๊ธฐ๋ฅ์ ๊ณต์์ ์ผ๋ก ์ถ์๋ ๊ฒฝ์ฐ, ์ ์ธ๊ณ ์ ๊ทผ์ฑ ํ์ค(์: WCAG)์ ์ค์ํ๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ์ง์ญ ๋ฐ ์ฌ์ฉ์ ๊ทธ๋ฃน์ ๊ฑธ์ณ ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ์ ๋ํ ๋ ๋ง์ ํ ์คํธ๊ฐ ํ์ํ ๊ฒ์ ๋๋ค.